<template>
  <div class="common-layout">
    <el-container class="main">
      <el-header class="header">
        <div class="header_icon">{{pro.pro_name}}</div>
        <div class="header_info">
          <el-image src="/logo_user.jpg" class="logo_img"></el-image>
          <el-dropdown :hide-on-click="false" class="dropdown">
            <span class="dropdown-link">
              {{ username }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="container">
        <el-aside class="aside">
          <ul>
            <li
              v-for="(item, index) in sideList"
              :key="index"
              class="item"
              @click="routeToPath(item.path ? item.path : 'none')"
            >
              <span class="item_p" @click="IsOpen(index)">
                <i :class="['iconfont', item.icon]" class="icon"></i>
                <span class="item_title">{{ item.title }}</span>
                <i
                  v-if="item.children"
                  :class="[
                    'iconfont',
                    item.open ? 'icon-open' : 'icon-arrow-right',
                  ]"
                ></i>
              </span>

              <ul v-if="item.children" class="item_menu" v-show="item.open">
                <li
                  v-for="(itemChildren, index) in item.children"
                  :key="index"
                  class="item"
                  @click="routeToPath(itemChildren.path)"
                >
                  <span>{{ itemChildren.title }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </el-aside>
        <el-main class="box">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import api from "../../axios";
import pro from '../../utils/progarm'
const username = sessionStorage.getItem("nickname");
const router = useRouter();
const token = localStorage.getItem("token");
const sideList = ref([
  {
    title: "图片管理",
    icon: "icon-iconzhucetouxiang",
    open: true,
    path: "/pictureManager",
  },
  {
    title: "类型管理",
    icon: "icon-zhuanti",
    open: true,
    path: "/typeManager",
  },
  {
    title: "回收站",
    open: true,
    icon: "icon-lajitong",
    path: "/clean",
  },
]);

//判断是否展开
const IsOpen = (index) => {
  sideList.value[index].open = !sideList.value[index].open;
};

//退出登录
const logout = () => {
  sessionStorage.clear();
  localStorage.clear();
  router.replace("/login");
};

//routeToPath
const routeToPath = (path) => {
  if (path === "none") {
    return;
  }
  router.push(path);
};


</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .header {
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header_icon {
      cursor: pointer;
      user-select: none;
      font-size: 30px;
      font-weight: 700;
      background-image: linear-gradient(#2de2ff, #8b67fb);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .header_info {
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: space-around;
      .logo_img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin: 0 15px;
      }
      .dropdown {
        cursor: pointer;
        color: cornflowerblue;
        margin-left: 5px;
        font-size: 16px;
        line-height: 16px;
      }
      .dropdown ::v-deep .dropdown-link {
        display: inline;
        line-height: 20px !important;
      }
    }
  }
  .container {
    height: calc(100vh - 60px);
    background-color: #342f2f37;
    .aside {
      width: 250px;
      padding: 10px;
      .sub-btn {
        width: 100%;
        font-size: 18px;
        margin: 4px 0;
      }
      .item {
        .item_p {
          border-radius: 4px;
          display: flex;
          cursor: pointer;
          font-weight: 500;
          font-size: 18px;
          height: 30px;
          line-height: 30px;
          padding: 5px;
          .icon {
            margin-right: 10px;
            width: 20px;
            font-size: 20px;
          }
          .item_title {
            flex: 1;
          }
        }
        .item_menu {
          padding-left: 35px;
          list-style: none;
          li {
            padding: 5px;
          }
          .item {
            border-radius: 4px;
            cursor: pointer;
          }
          .item:hover {
            background-color: #d1cfb3;
          }
        }
      }

      .item_p:hover {
        background: #d1cfb3;
      }
    }
    .box {
      margin-top: 10px;
      background-color: #fff;
    }
  }
}
</style>